<template>
  <div>
    <div class="title">
      <p style="color: #fff">Hello!😈 Nurtrain Come and Get Train👊</p>
    </div>
    <div id="banner">
      <div
        class="img-list img-wrapper"
        :style="{
          transition: animationTime + 's ease',
          left: imgBoxLength * index + 'vw',
        }"
      >
        <div
          v-for="(imgBox, i) in imgBoxes"
          :key="i"
          class="img-box"
          :id="imgBox.id"
          :style="{ transform: imgBox.transform }"
          @click="centerImage(i)"
        >
          <div class="info">
            <h3>{{ imgBox.z }}</h3>
            <h5>{{ imgBox.z5 }}</h5>
          </div>
          <img :src="imgBox.src" alt="" />
        </div>
      </div>
    </div>
    <div class="btn-group" :style="{ opacity: btnOpacity, bottom: btnBottom }">
      <button class="last btn" @click="throttledLastClick">
        <svg
          t="1686471404424"
          class="icon left"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2373"
          width="128"
          height="128"
        >
          <path
            d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z"
            fill=""
            p-id="2374"
          ></path>
        </svg>
      </button>
      <button class="next btn" @click="throttledNextClick">
        <svg
          t="1686471404424"
          class="icon right"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2373"
          width="128"
          height="128"
        >
          <path
            d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z"
            fill=""
            p-id="2374"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</template>

<script>
import router from "@/router/index.js";
import { useRouter } from "vue-router";

export default {
  name: "EllipticalRotationChart",
  data() {
    return {
      imgBoxes: [
        {
          src: "/elliptical-rotation-chart/asset/image/1.png",
          id: "",
          transform: "none",
          z: "Relaxing Learning Vibe",
          z5: "轻松学习氛围",
        },
        {
          src: "/elliptical-rotation-chart/asset/image/2.png",
          id: "",
          transform: "none",
          z: "Reasonable Assessment System",
          z5: "合理考核制度",
        },
        {
          src: "/elliptical-rotation-chart/asset/image/3.png",
          id: "",
          transform: "none",
          z: "Friendly Community Interaction",
          z5: "友好社区互动",
        },
        {
          src: "/elliptical-rotation-chart/asset/image/4.png",
          id: "",
          transform: "none",
          z: "Online Course Browsing",
          z5: "在线课程浏览",
        },
        {
          src: "/elliptical-rotation-chart/asset/image/5.png",
          id: "",
          z: "Be With You",
          z5: "成长路上的好伴侣",
          transform: "none",
        },
        {
          src: "/elliptical-rotation-chart/asset/image/6.png",
          id: "last-img-box",
          transform: "translateX(-160.68vw)",
          z: "Click",
          z5: "点击进入",
        },
      ],
      index: 0,
      timer: null,
      animationTime: 0.5,
      btnOpacity: 0,
      btnBottom: "0%",
      postSpacing: 1.78, // vw
      postSize: 25, // vw
    };
  },
  computed: {
    imgBoxCount() {
      return this.imgBoxes.length;
    },
    imgBoxLength() {
      return this.postSize + this.postSpacing;
    },
    imgListLength() {
      return (this.postSize + this.postSpacing) * this.imgBoxCount;
    },
  },
  mounted() {
    const router = useRouter();
    // 初始化数组中元素的顺序，将最后一张图片放在第一位与html部分图片展示位置一致
    this.imgBoxes.unshift(this.imgBoxes.pop());

    // 设置按钮出现时间
    setTimeout(() => {
      this.btnOpacity = 1;
      this.btnBottom = "5%";
    }, this.animationTime * 1000);
  },
  methods: {
    clickFun(flag) {
      if (flag === "next") {
        // 修复跳两格问题：只改变index，不进行数组操作
        this.index--;

        setTimeout(() => {
          // 当点击下一个累计达到图片数量时，相当于要回到原点，则重置变量和位置
          if (Math.abs(this.index) === this.imgBoxCount) {
            this.index = 0;
            this.imgBoxes.forEach((item) => {
              if (item.id === "last-img-box") {
                item.transform = "translateX(-160.68vw)";
              } else {
                item.transform = "none";
              }
            });
          } else {
            // 当第一张图片为last-img-box时，说明已经跑完了一轮，则将其放在最后的位置，初始状态其为-160.68vw
            if (this.imgBoxes[0].id === "last-img-box") {
              const lastImgBox = this.imgBoxes.find(
                (item) => item.id === "last-img-box",
              );
              if (lastImgBox) {
                lastImgBox.transform = "translateX(0px)";
              }
            } else if (this.index >= 0) {
              /*
                这种情况是为了解决在点击完第last，再点击next时造成的bug问题，其实就是回退，再点击last之前
                没有加transform属性，点击last以后则添加了transform属性，再次点击next按钮后应该不加transform
              */
              this.imgBoxes[0].transform = "none";
            } else {
              // 正常情况下，点击next，则将最左侧的图片移到最后
              this.imgBoxes[0].transform = "translateX(160.68vw)";
            }
          }
        }, this.animationTime * 1000);
      } else {
        // 上一张 last
        this.index++;

        // 模拟移动情况，把最右侧的图片（元素）移动到最前
        this.imgBoxes.unshift(this.imgBoxes.pop());

        // 因为左侧图片只会有一张，所以需要先移动图片到左侧，再进行imgListOne的移到
        if (this.imgBoxes[0].id === "last-img-box" && this.index !== 0) {
          // 当第一张图片为last-img-box时，说明已经跑完了一轮，此时相对于一开始的位置为-321.36vw
          this.imgBoxes[0].transform = "translateX(-321.36vw)";
        } else if (this.index < 0) {
          // 这种情况与点击next按钮出现的回退现象一致
          this.imgBoxes[0].transform = "none";
        } else {
          // 正常情况下，点击last，则将最右侧的图片移到最前
          this.imgBoxes[0].transform = "translateX(-160.68vw)";
        }

        const lastImgBox = this.imgBoxes.find(
          (item) => item.id === "last-img-box",
        );

        // 当点击下一个累计达到图片数量时，相当于要回到原点，则重置变量和位置
        if (Math.abs(this.index) === this.imgBoxCount) {
          this.index = 0;
          setTimeout(() => {
            this.imgBoxes.forEach((item) => {
              if (item.id === "last-img-box") {
                item.transform = "translateX(-160.68vw)";
              } else {
                item.transform = "none";
              }
            });
          }, this.animationTime * 1000);
        }
      }
    },
    throttle(fn, delay) {
      return () => {
        if (this.timer) {
          return;
        }
        fn.apply(this);
        this.timer = setTimeout(() => {
          this.timer = null;
        }, delay);
      };
    },
    nextClick() {
      this.clickFun("next");
    },
    lastClick() {
      this.clickFun("last");
    },
    centerImage(imageIndex) {
      router.push("/login");
      // 计算需要移动的步数，使选中的图片居中
      const currentPosition = imageIndex;
      const centerPosition = Math.floor(this.imgBoxCount / 2);
      const stepsToMove = currentPosition - centerPosition;

      // 根据步数移动图片
      if (stepsToMove > 0) {
        // 需要向左移动
        for (let i = 0; i < stepsToMove; i++) {
          this.lastClick();
        }
      } else if (stepsToMove < 0) {
        // 需要向右移动
        for (let i = 0; i < Math.abs(stepsToMove); i++) {
          this.nextClick();
        }
      }
    },
  },
  created() {
    this.throttledNextClick = this.throttle(
      this.nextClick,
      this.animationTime * 1000,
    );
    this.throttledLastClick = this.throttle(
      this.lastClick,
      this.animationTime * 1000,
    );
  },
};
</script>

<style>
@font-face {
  font-family: Millik;
  font-weight: 700;
  src: url(/elliptical-rotation-chart/asset/font/Millik.c3f91cb.ttf)
    format("truetype");
  text-rendering: optimizeLegibility;
}

:root {
  --post-spacing: 1.78vw;
  --post-size: 25vw;
  --mask-size: 100vw;
}

* {
  padding: 0;
  margin: 0;
  font-family: Millik, Arial, sans-serif;
  font-size: 62.5%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  background: #fff;
  //background-image: url(/elliptical-rotation-chart/asset/image/grid.svg);
  background-image: url("/images/pattern.svg");
  //background-image: url("/images/hhholographic.webp");
  background-repeat: repeat;
  background-size: 300px 300px;
  //background-repeat: no-repeat;
  //background-size: 2000px 1200px;
}

.title {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%, -5%);
}

.title p {
  font-size: 4rem;
  font-weight: 800;
  white-space: nowrap;
}

#banner {
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: calc(var(--post-size) / 0.72);
  mask: url();
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--mask-size);
  position: absolute;
  top: 10%;
}

#banner .img-wrapper {
  display: flex;
  position: absolute;
  width: 100%;
  float: left;
  height: calc(var(--post-size) / 0.72);
  transform: translate(13.39vw, 0);
  animation: admission 1.5s;
}

#banner .img-wrapper .img-box {
  height: 100%;
  display: inline-block;
  margin-right: var(--post-spacing);
  position: relative;
  cursor: pointer;
  transition: 0.3s ease;
}

/* 添加鼠标悬停发光效果 */
#banner .img-wrapper .img-box:hover {
  box-shadow:
    0 0 25px 10px rgba(255, 255, 255, 0.8),
    0 0 40px 15px rgba(255, 255, 255, 0.5),
    0 0 60px 20px rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
  z-index: 10;
  filter: brightness(1.2);
  border: 2px solid rgba(255, 255, 255, 0.8);
}

#banner .img-wrapper .img-box:hover .info {
  background: rgba(23, 23, 23, 0.7);
}

#banner .img-wrapper .img-box .info {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(23, 23, 23, 0.5);
  text-align: center;
  color: #fff9f1;
  font-size: 4rem;
  transition: 0.3s ease;
}

#banner .img-wrapper .img-box img {
  width: var(--post-size);
  height: 100%;
  object-position: center;
  object-fit: cover;
}

#banner .img-wrapper .img-box:last-child {
  transform: translate(-160.68vw, 0);
}

.btn-group {
  height: 15vh;
  position: absolute;
  left: 50%;
  bottom: 0%;
  transform: translate(-50%, -50%);
  transition: 1s;
  opacity: 0;
}

.btn-group .btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #171717;
  background-color: #fff;
  margin: 10px;
  cursor: pointer;
  transition: 0.4s;
  box-sizing: border-box;
}

.btn-group .btn:hover {
  transform: scale(1.2);
  background-color: #000;
}

.btn-group .btn:hover .icon {
  fill: #fff;
}

.btn-group .btn .icon {
  width: 30px;
  height: 30px;
}

.btn-group .btn .right {
  transform: rotate(180deg);
}

.img-list {
  left: 0;
}

@keyframes admission {
  0% {
    transform: translate(140vw, 0);
  }
  100% {
    transform: translate(13.39vw, 0);
  }
}
</style>
